<!-- 横向柱状图 -->
<template>
  <vue-chart :option="option" ref="chart" />
</template>

<script setup lang="ts">
import VueChart from "vue-echarts";
import { use } from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { options } from "./options";
const props = defineProps<{
  config: any;
}>();
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  GridComponent,
  LegendComponent,
  TooltipComponent,
]);

const option = ref(options);
const chart = ref();

watch(
  () => props.config.width,
  () => chart.value.resize()
);
watch(
  () => props.config.height,
  () => chart.value.resize()
);
</script>

<style scoped lang="scss"></style>
